<template>
    <div>
        <Modal width="1000"
               v-model="modal.courseware"
               @on-ok="ok"
               @on-cancel="cancel"
               :styles="{top: '20px'}"
               :loading="loading"
               title="课件">
            <div style="max-height:800px;overflow-y:auto;overflow-x:hidden;">
                <Row type="flex" justify="start" align="middle">
                    <Col span="10">
                        <Button type="primary" @click="coursemodal.videoFlag = true,modal.courseware = false" class="btns">视频管理</Button>
                        <Button type="warning" class="btns" @click="coursemodal.materialFlag=true,modal.courseware = false">资料管理</Button>
                        <Button type="info" class="btns" @click="coursemodal.taskexercisesManagerFlag=true,modal.courseware = false" >课堂任务练习管理</Button>
                    </Col>
                    <Col span="3">视频:{{videopreventDuplicationId.length}}/{{VideoList.length}}</Col>
                    <Col span="3">资料:{{materialPreventDuplicationId.length}}/{{materialList.length}}</Col>
                    <Col span="4">课程习题:{{ExercisesDuplicationId.length}}/{{ExercisesList.length}}</Col>
                    <Col span="4">章节任务:{{taskDuplicationId.length}}/{{TaskList.length}}</Col>
                </Row>
                <hr>
                <Row type="flex" justify="center">
                    <Tree :data="treeNodes" :render="treeNodeRender"></Tree>
                </Row>
            </div>
        </Modal>
       <video-manager :coursemodal = "coursemodal"></video-manager>
       <material-manager :coursemodal = "coursemodal"></material-manager>
        <taskexercises :coursemodal = "coursemodal"></taskexercises>
    </div>
</template>

<script>
    import videoManager from "@c/course/myCourse/videoManager"
    import materialManager from "@c/course/myCourse/materialManager"
    import taskexercises from "@c/course/myCourse/taskexercises"
    import {treedata} from '@/libs/util'
    export default {
        props:{
            modal:{
                courseware:false,
                courseDo:{}
            }
        },
        data(){
            return{
                loading:true,
                VideoList:[],
                materialList:[],
                TaskList:[],
                ExercisesList:[],
                treeNodes: [
                    {
                        title: '',
                        expand: true,
                        type: "course",
                        courseId: null,
                        children: []
                    }
                ],
                coursemodal:{
                    courseId:null,
                    materialFlag:false,
                    taskexercisesManagerFlag:false,
                    videoFlag:false
                },
                videopreventDuplicationId:[],
                materialPreventDuplicationId:[],
                ExercisesDuplicationId:[],
                taskDuplicationId:[]
            }
        },
        methods:{
            ok(){
                let list = Array();
                this.treeNodes[0].children.forEach(index1=>{
                    index1.TaskSeletced.forEach(index5=>{
                        list.push({"id":index5.split(":")[0],"rid":index5.split(":")[1]})
                    })
                    index1.children.forEach(index2=>{
                        index2.videoselected.forEach(index3=>{
                            list.push({"id":index3.split(":")[0],"rid":index3.split(":")[1]})
                        })
                        index2.materialselected.forEach(index3=>{
                            list.push({"id":index3.split(":")[0],"rid":index3.split(":")[1]})
                        })
                        index2.ExercisesSeleted.forEach(index3=>{
                            list.push({"id":index3.split(":")[0],"rid":index3.split(":")[1]})
                        })
                    })
                })
            //    console.log(this.videolist)
                this.http.post("/mycourse/saveCourseWare",this.qs.parse({"list1":list,"courseId":this.modal.courseDo.courseId})).then(res=>{
                    if(res){
                        this.loading = false
                        Object.assign(this.$data, this.$options.data())
                        this.modal.courseware = false
                        this.$Message.success("保存成功")
                    }
                })

            },
            cancel(){
                Object.assign(this.$data, this.$options.data())
                this.modal.courseware = false
            },
            /**
             * 使用 JSX 渲染节点
             */
            treeNodeRender(h, {root, node, data}) {
                let widths = data.type == "fu" ? "918px" : "900px";
                return (
                    <div style={"width:" + widths}>
                        <div style="float:left" class="title">
                            <Icon style="margin-right:10px" type={data.type == "course" ? 'ios-book' : data.type == "fu" ? 'ios-paper' : 'md-pricetag'}/>
                            <Tag color={data.type == "course" ? 'default' : data.type == "fu" ? 'purple' : 'red'}>{data.title}</Tag>
                        </div>
                        <div style="float:right">
                            <i-form label-width={90} v-show={data.type != "course"} >
                                <form-item label="视频绑定" v-show={data.type == "zi"}>
                                    <i-select multiple
                                             v-model={data.videoselected}
                                              max-tag-count={3}
                                              onOn-change={this.videoChange}  
                                              style="width:600px">
                                        {
                                            this.VideoList.map(index=>{
                                                return <i-option  disabled={this.videopreventDuplicationId.includes(index.resourceId)?true:false}
                                                                 value={data.chapterId+":"+index.resourceId}>{index.resourceTitle}</i-option>
                                            })
                                        }
                                    </i-select>
                                </form-item>
                                <form-item label="课程作业绑定" v-show={data.type == "zi"}>
                                    <i-select
                                        multiple
                                        v-model={data.ExercisesSeleted}
                                        onOn-change={this.ExercisesChange}
                                        style="width:600px">
                                        {
                                            this.ExercisesList.map(m=>{
                                                return <i-option disabled={this.ExercisesDuplicationId.includes(m.tkId)?true:false}
                                                                 value={data.chapterId+":"+m.tkId}>{m.tkName}</i-option>
                                            })
                                        }
                                    </i-select>
                                </form-item>
                                <form-item label="资料绑定" v-show={data.type == "zi"}>
                                    <i-select multiple
                                              v-model={data.materialselected}
                                              max-tag-count={3}
                                              onOn-change={this.materialChange}
                                              style="width:600px">
                                        {
                                            this.materialList.map(index=>{
                                                return <i-option  disabled={this.materialPreventDuplicationId.includes(index.resourceId)?true:false}
                                                                  value={data.chapterId+":"+index.resourceId}>{index.resourceTitle}</i-option>
                                            })
                                        }
                                    </i-select>
                                </form-item>
                                <form-item label="章节任务" v-show={data.type == "fu"}>
                                    <i-select
                                        multiple
                                        v-model={data.TaskSeletced}
                                        onOn-change={this.TaskChange}
                                        style="width:600px">
                                        {
                                            this.TaskList.map(m=>{
                                                return <i-option    disabled={this.taskDuplicationId.includes(m.tkId)?true:false}
                                                                    value={data.chapterId+":"+m.tkId}>{m.tkName}</i-option>
                                            })
                                        }
                                    </i-select>
                                </form-item>
                            </i-form>
                        </div>
                    </div>
                );
            },
            /**
             * 获取目录
             */
            getdirectoryById(val) {
                this.http.post("/mycourse/getdirectoryById", this.qs.stringify({'courseId': val})).then(res => {
                    if (res.data) {
                        this.treeNodes[0].children = treedata(res.data)
                    }
                })
            },
            /**
             * 获取视频和资料list
             */
            getVideoAndMaterialList(courseId){
                this.http.post("/mycourse/getVideoAndMaterialList",this.qs.stringify({"courseId":courseId})).then(res=>{
                    if(res.data){
                        this.VideoList = res.data.filter(index=>index.resourceType=="2")
                        this.materialList = res.data.filter(index=>index.resourceType=="3")
                    }
                })
            },
            /**
             * 获取课程习题，章节任务列表
             */
            getTaskExercisesList(courseId){
                this.http.post("/mycourse/getTaskexercisesList",this.qs.stringify({"courseId":courseId})).
                then(res=>{
                    if(res.data){
                        this.TaskList = res.data.filter(r=>!r.exercise)
                        this.ExercisesList = res.data.filter(r=>r.exercise)
                    }
                })
            },
            /**
             * 在select下拉选着视频，将视频id装list防止重复绑定视频
             */
            videoChange(val){
                let list = []
                this.treeNodes[0].children.forEach(index1=>{
                    index1.children.forEach(index2=>{
                        index2.videoselected.forEach(index3=>{
                            list.push(index3.split(":")[1])
                        })
                    })
                })
                let list2 = new Set(list)
                this.videopreventDuplicationId=[]
                list2.forEach(index=>{
                    this.videopreventDuplicationId.push(index)
                })
            },
            /**
             * 在select下拉选着资料，将视频id装list防止重复绑定资料
             */
            materialChange(val){
                let list = []
                this.treeNodes[0].children.forEach(index1=>{
                    index1.children.forEach(index2=>{
                        index2.materialselected.forEach(index3=>{
                            list.push(index3.split(":")[1])
                        })
                    })
                })
                let list2 = new Set(list)
                this.materialPreventDuplicationId=[]
                list2.forEach(index=>{
                    this.materialPreventDuplicationId.push(index)
                })
            },
            /**
             * 在select下拉选着課堂習題，将视频id装list防止重复绑定课堂习题
             */
            ExercisesChange(val){
                let list = []
                this.treeNodes[0].children.forEach(index1=>{
                    index1.children.forEach(index2=>{
                        index2.ExercisesSeleted.forEach(index3=>{
                            list.push(index3.split(":")[1])
                        })
                    })
                })
                let list2 = new Set(list)
                this.ExercisesDuplicationId=[]
                list2.forEach(index=>{
                    this.ExercisesDuplicationId.push(index)
                })
            },
            /**
             * 在select下拉选着章节任务，将视频id装list防止重复绑定章节任务
             */
            TaskChange(val){
                let list = []
                this.treeNodes[0].children.forEach(index1=>{
                    index1.TaskSeletced.forEach(index2=>{
                        list.push(index2.split(":")[1])
                    })
                })
                let list2 = new Set(list)
                this.taskDuplicationId=[]
                list2.forEach(index=>{
                    this.taskDuplicationId.push(index)
                })
            }
        },
        watch:{
            /**
             * 初始化
             * @param val
             */
            'modal.courseware'(val){
                if(val){
                    this.getdirectoryById(this.modal.courseDo.courseId);
                    this.getVideoAndMaterialList(this.modal.courseDo.courseId)
                    this.getTaskExercisesList(this.modal.courseDo.courseId)
                    this.treeNodes[0].courseId = this.modal.courseDo.courseId
                    this.coursemodal.courseId = this.modal.courseDo.courseId
                    this.treeNodes[0].title = this.modal.courseDo.courseName
                }
            },
        },
        components:{
            videoManager,
            materialManager,
            taskexercises
        }
    }
</script>
<style>
    .btns{
        margin-right: 10px;
    }
    hr{
        margin-top: 10px;
    }
</style>
